<template>
  <div id="app">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.com_id">
        <template #title>
          <div class="comment">
            <van-image
              fit="cover"
              round
              :src="item.aut_photo"
              width="40px"
              height="40px"
            />
            <div class="comment_box">
              <div class="comment_name">{{ item.aut_name }}</div>
              <div class="comment_content">{{ item.content }}</div>
              <div class="comment_time">
                {{ item.pubdate | relativeTime }}
                <van-button size="mini" class="btn" @click="add(item)"
                  >回复({{ item.reply_count }})</van-button
                >
              </div>
            </div>
            <van-icon
              :name="item.is_liking ? 'like' : 'like-o'"
              @click="likings(item)"
            ></van-icon>
          </div>
        </template>
      </van-cell>
    </van-list>
    <!-- 发表评论 -->
    <van-field
      v-model="commentValue"
      clearable
      placeholder="请输入评论内容"
      class="field"
    >
      <template #button>
        <van-button size="small" type="info" @click="sub">发布评论</van-button>
      </template>
    </van-field>
    <!-- sheet回复评论动作面板 -->
    <van-action-sheet v-model="sheetShow" title="发表回复">
      <Reply v-if="sheetShow" :currentItem="currentItem"></Reply>
    </van-action-sheet>
  </div>
</template>

<script>
import Reply from './reply.vue'
import { cmtListAPI, cmtIssueAPI, likingAPI } from '@/api/index.js'
import { Toast } from 'vant'
export default {
  components: {
    Reply
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      commentValue: '', // 输入的评论内容
      offset: undefined,
      sheetShow: false,
      color: true,
      currentItem: {}
    }
  },
  methods: {
    // 发起请求获得评论内容
    async onLoad () {
      let res = await cmtListAPI({
        type: 'a',
        source: this.$route.query.id,
        offset: this.offset
      })
      // console.log(res)
      // 因为直接赋值会覆盖掉之前获得的评论，所以使用追加
      this.list.push(...res.data.data.results)
      // 把本次请求的最后一条的数据作为下次请求的参数
      this.offset = res.data.data.last_id

      this.loading = false

      // 判断当前最后一条评论的id是否等于所有数据的最后一条id
      if (res.data.data.end_id == res.data.data.last_id) {
        // 代码进入到这里说明评论加载完毕了
        this.finished = true
      }
    },
    // 发表评论的接口
    async sub () {
      if (!this.commentValue) return alert('评论内容不能为空')
      // 发起请求发表评论
      let res = await cmtIssueAPI({
        target: this.$route.query.id,
        content: this.commentValue
      })
      this.list.push(res.data.data.new_obj)
      // console.log(res.data.data.new_obj);
      // 评论发表成功后清空输入框
      this.commentValue = ''
    },
    // 回复评论的点击事件
    add (item) {
      this.sheetShow = true
      this.currentItem = item
    },
    async likings (item) {
      await likingAPI({
        target: item.com_id
      })
      // console.log(res);
      if (item.is_liking) {
        item.is_liking = !item.is_liking
      } else {
        item.is_liking = !item.is_liking
      }
    }
  }
}
</script>

<style scoped lang="less">
.comment {
  display: flex;
  margin-top: 18px;
  .comment_box {
    margin-left: 20px;
    flex: 1;
    .comment_name {
      color: rgb(70, 107, 157);
    }
    .comment_content {
      margin: 5px 0;
    }
    .comment_time {
      color: #ccc;
      display: flex;
      align-items: center;
      height: 20px;
      font-size: 12px;
      .btn[data-v-3a1de910] {
        margin-left: 5px;
      }
    }
  }
}
.field {
  position: fixed;
  width: 100%;
  left: 0;
  font-size: 16px;
  z-index: 999;
  bottom: 0;
  border-top: 1px solid #eee;
}
</style>
